<template>
    <div class="process-steps">
        
        <el-steps :space="200" :active="5" simple class="custom-steps">
            <!-- 申请提交步骤 -->
            <el-step title="申请提交" description="提交认证申请材料"  />
            <!-- 材料审核步骤 -->
            <el-step title="材料审核" description="审核提交的申请材料"  />
            <!-- 现场检查步骤 -->
            <el-step title="现场检查" description="进行现场审核和检查"  />
            <!-- 评审认证步骤 -->
            <el-step title="评审认证" description="专家评审认证申请"  />
            <!-- 证书发放步骤 -->
            <el-step title="证书发放" description="颁发认证证书"  />
        </el-steps>
    </div>
</template>

<script>

export default {
    components: {
    }
}
</script>

<style scoped>
.custom-steps {
  /* 可以先设置容器的最小高度 */
  min-height: 120px; /* 根据需要调整 */
}

/* 穿透样式修改步骤条内部元素高度 */
:deep(.el-steps) {
     /* 调整整个步骤条容器的高度 */
    height: 120px;
}
/* 调整步骤项的高度（包含图标、标题、描述） */
:deep(.el-step__icon) {
  width: 40px;
  height: 40px;
}

.process-steps {

    min-height: 150px;
    margin-top: 20px;
    margin-bottom: 50px;
    
}
</style>